<template>
		<div id="userInfo">
		   <!--    导航栏 -->
			   <van-nav-bar
			      title="联系客服"
			      left-arrow
			      :fixed=true
			      :border=true
			      @click-left="$router.go(-1)"
			   ></van-nav-bar>
               <van-cell-group style="margin-top:3rem;">
                    <van-cell title="客服电话"  value="0754-2346646464" />                  
               </van-cell-group>

         <!-- 路由的出口 -->
         <transition name="router-slider" mode="out-in">
            <router-view></router-view>
          </transition>
		</div>
</template>

<script>
 import {getUser} from './../../../service/api/index'
 import {mapState,mapMutations} from 'vuex'
 import {Toast} from 'vant'
	export default{
		name:"UserInfo",
		methods:{
			...mapMutations(['RESET_USER_INFO','CLEAR_CART']),

		},
        data(){
            return{
               user:'',
            }
        },
       computed:{
            ...mapState(["userInfo"]),  //取state.js里面的值，因为它能够实时监控检测，所以计算属性中
          },
        created(){
           // console.log(this.userInfo.token);
             //获取用户信息
                getUser(this.userInfo.token).then((response)=>{
                   console.log(response);
                  if (response.success) {
                       this.user=response.data;
                      // console.log(this.user);
                  }
                }).catch(error=>{
                    // todo......
                    console.log(error);
               })   //---catch
        }, // ----created


	}
</script>


<style scoped>
     #userInfo{
     	position:fixed;
     	top:0;
     	left:0;
     	bottom:0;
     	right:0;
     	background-color:#f5f5f5;
     	z-index:200;
     }

     .logout{
     	margin-top:4rem;
     	height:2.5rem;
     	width:100%;
     	background-color:#fff;
     	display:flex;
     	justify-content:center;
     	align-items:center;
     }

     .logout button{
     	background-color:transparent;
     }

    .router-slider-enter-active,.router-slider-leave-active{
      transition:all 0.3s;
    }

    .router-slider-enter,.router-slider-leave-active{
      transform:translate3d(2rem,0,0);
      opacity:0;
    }
</style>